<template>
  <div class="calendar-room mincalendar-room" v-loading.fullscreen.lock="loading">
    <div class="calendar-title"></div>
    <div class="calendar-picker">
      <el-date-picker
        v-model="nowDate"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择日期"
        :learable="false"
        :editable="false"
        :clearable="false"
        :picker-options="pickerOptions"
        @change="initRoom"
      >
      </el-date-picker>
    </div>
    <div class="calendar-header">
      <table class="calendar-header-table">
        <tbody>
        <tr>
          <th class="calendar-header-item" v-for="(i,index) in 30">
            <div class="calendar-header-date"
            :class="{'weekend':getDays(index)===6||getDays(index)===0,
            'today':isToday(index)}">
              <div class="calendar-header-day" style="margin-top:-3px" v-if="holidayData.some((val)=>{return val.date===$format('MM-dd',getFormatDay(index))})">
                <template v-for="m in holidayData" v-if="m.date===$format('MM-dd',getFormatDay(index))">
                  {{m.holiday}}
                </template>
                <div class="isHoliday">休</div>
              </div>
              <div class="calendar-header-day" v-else>
                <template v-if="isToday(index)">今天</template>
                <template v-else>{{$format('MM-dd',getFormatDay(index))}}</template>
              </div>
              <div class="calendar-header-desc">{{weekday[getFormatDay(index).getDay()]}}</div>
            </div>
          </th>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="calendar-body">
      <div class="calendar-leftHeader">
        <div class="calendar-category" v-for="m in roomNumData">
          <div class="calendar-category-name">
            <span class="calendar-category-name-text">{{m.CategoryName}}</span>
          </div>
          <div class="calendar-category-list">
            <div class="calendar-category-room">
              <span>余量/总量</span>
            </div>
          </div>
        </div>
      </div>
      <div v-scroll="onscroll" class="calendar-status-list">
        <table class="calendar-status-table">
          <tbody>
              <tr class="calendar-status-row" v-for="(m,mindex) in roomRowData">
                <td class="calendar-status" v-for="(i,index) in m.list" v-if="index<30">
                  <div style="text-align:center">
                    {{i.LeftCount}}/{{i.TotalCount}}
                  </div>
                </td>
              </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      let _this=this;
      return {
        paymentList:{1:'待支付',2:'支付中',3:'已支付'},
        cerList:{1:'身份证',2:'护照',3:'军官证',4:'通行证',5:'其他'},
        orderTypeList:['已预订','已入住','部分入住','已退房','部分退房','已取消'],
        loading:false,
        ventorySimple:[],
        weekday:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
        pickerOptions: {
          // disabledDate(time) {
          //   return (time.getTime() + 3600 * 1000 * 24 * 3)< Date.now();
          // },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        holidayData:[
          {date: "05-01", type: 0, holiday: "劳动节"}
        ],
        roomNumData:[
          {roomName:'大床房',isopen:true,roomId:'6',roomData:[]},
        ],
        roomRowData:[
          {roomName:'101',roomId:'6',roomList:[
            {roomIn:0,price:'150'},
          ]}
        ],
        roomRowFormatData:[],
        nowDate: this.$format('yyyy-MM-dd',new Date()),
      }
    },
    computed:{
      holiday(){
        this.holidayData.map((val)=>{
          if(val.date===this.$format('MM-dd',new Date(new Date(this.nowDate).getTime() + 3600 * 1000 * 24 * index))){
            return val.holiday
          }
        })
      }
    },
    methods: {
      getDays(index){
        return new Date(new Date(this.nowDate).getTime() + 3600 * 1000 * 24 * index).getDay();
      },
      getFormatDay(index){
        return new Date(new Date(this.nowDate).getTime() + 3600 * 1000 * 24 * index);
      },
      isToday(index){
        return this.$format('MM-dd',new Date())===this.$format('MM-dd',this.getFormatDay(index));
      },
      getAlldate(start,end){
        let bd = new Date(start),be = new Date(end);
        let bdTime = bd.getTime(), beTime = be.getTime(),timeDiff = beTime - bdTime;
        let dArr = [];
        for(var i=0; i<= timeDiff; i+=86400000){
          var ds = this.$format('yyyy-MM-dd',new Date(bdTime+i));
          dArr.push(ds)
        }
        return dArr
      },
      initRoom(){
        let datas={
          StartDate:this.$format('yyyy-MM-dd',new Date(this.nowDate)),
          Days:30,
        }
        this.$ajax.GetRoomInventoryBaseCategory(datas).then(res=>{
          if(res.Success){
            this.roomNumData=[];
            this.roomRowData=[];
            _.map(res.Data.List,val=>{
              this.roomNumData.push({
                CategoryName:val.CategoryName
              })
              this.roomRowData.push({list:val.List})
            })
            this.$nextTick(()=>{
              this.loading=false;
            })
            console.log(this.roomRowData)
          }
        })
      },
      onscroll(e,position){
        let tabL=this.$el.querySelector(".calendar-header");
        let tabT=this.$el.querySelector(".calendar-leftHeader");
        tabT.scrollTop=position.scrollTop;
        tabL.scrollLeft=position.scrollLeft;
      },
    },
    mounted(){
      this.loading=true;
      this.initRoom();
    }
  }
</script>
